<template>
	<div class="plane">
		<ul v-for="ulnum in 25" :key="ulnum" :class="'ulnum-'+ulnum">
			<view v-if="ulnum <13 " class="showli">
				<li v-for="linum in (25 - ulnum*2)" :key="linum" :class="'linum-'+ulnum+'-'+linum">
					<img src="../assets/logo2.png" >
				</li>
			</view>
			<view v-else class="showli">
				<li v-for="linum in (ulnum*2 - 25)" :key="linum" :class="'linum-'+ulnum+'-'+linum">
					<img src="../assets/logo2.png" >
				</li>
			</view>
		</ul>
	</div>
</template>

<script>
	window.onresize=function(){
		console.log("hahah")
	}
</script>

<style lang="scss" scoped>
	@keyframes spin {
		0% {
			transform: rotateZ(0deg) rotateY(45deg) rotateX(0deg);
		}
		100% {
			transform: rotateZ(360deg) rotateY(405deg) rotateX(360deg);
		}
	}
	.showli{
		padding: 0;
		margin: 0;
		list-style: none;
		width: 100%;
		height: 100%;
		position: absolute;
		transform-style: preserve-3d;
	}
	img{
		width: 45px;
		height: 45px;
		border-radius: 45px;
	}
	.plane {
		width: 100px;
		height: 100px;
		margin: 350px auto;
		transform-style: preserve-3d;
		transform-origin: 50px 50px;
		-webkit-animation: spin 40s infinite linear;
		animation: spin 40s infinite linear;
	}
	.plane ul {
		padding: 0;
		margin: 0;
		list-style: none;
		width: 100%;
		height: 100%;
		position: absolute;
		transform-style: preserve-3d;
	}
	.plane li{
		position: absolute;
		border-radius: 45px;
		opacity: 0.8;
		display: flex;
		align-items: center;
		justify-content: center;
		// background-color: red;
	}
	@for $i from 1 to 26 {
		@if $i<13 {
			$limax:26-$i*2;
			@for $j from 1 to $limax {
				.linum-#{$i}-#{$j}{transform: rotateY(#{$j*360/($limax - 1)}deg) rotateX(($i) * 7.5deg)  translateZ(350px);}
			}
		}@else{
			$limax:$i*2 - 26;
			@for $j from 1 to $limax+2 {
				.linum-#{$i}-#{$j}{transform: rotateY(#{$j*360/($limax + 1)}deg) rotateX(($i - 1) * -7.5deg)  translateZ(350px);}
			}
		}
	}
</style>
